<template>
  <div>
     <topnav title="我的资产"></topnav>
     <div class="space1"></div>
      <div class="top">
          <h1>{{Mymoney}}</h1>
          <span>在投总额</span>
      </div>
      <!-- 商品详情 -->
      <div class="goods">
        <div class="title">
            <span></span>
            <p>购买鱼种</p>
        </div>
        <div v-for="(item,index) in fish" :key="index" class="list">
            <ul>
                <a href="#"></a>
                <li>
                    <img :src="item.fish.head_img" alt="">
                    <p>鲸鱼</p>
                </li>
                <li>
                    <p>{{item.fish.introduce}}</p>
                    <span>￥{{item.fish.value}}.00  {{item.stock}}条</span>
                </li>
                <li>
                    <span @click="sell(item.fish.id)">立即出售</span> 
                </li>
            </ul>
        </div>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import api from "../../axios/api"
export default {
data(){
    return{
       id:null,
       fish:[],
       Mymoney:null,
    }
},
mounted(){
    this.id = localStorage.getItem("id")
    this.myfish()
},
methods:{
    myfish(){
        this.$post(api.myfish,{user_id:this.id})
        .then(res=>{
            if(res.code == 0){
                this.fish = res.data
                for(let i=0; i<res.data.length;i++){
                    this.Mymoney += res.data[i].fish.value*res.data[i].stock
                }
                // console.log(this.Mymoney)
            }else{
                this.$toast(res.msg)
            }
        })
    },
    sell(id){
        this.$router.push("mysell"+ "?id="+id )
    }
},
components:{
    topnav
}
}
</script>

<style lang="less" scoped>
.space1 {
    height: 20px;
    background-image: linear-gradient(to bottom,#ff6a10,#f9812d)
}
    .top {
        background: url("../../assets/asstes_01.jpg") no-repeat;
        height: 210px;
        width: 100%;
        background-size: 100%;
        text-align: center;
        color: #fff;
        p{
        padding-top: 10px;
        }
        h1{
            margin:  0px 0px 10px 0px;
            padding-top: 60px;
        }
        span {
            font-size: 14px;
        }
    }
    .goods {
        width: 95%;
        margin: 0 auto;
        .title {
            display: flex;
            align-items: center;
            margin-top: 5px;
            p{
                margin: 0;
                margin-left: 5px;
                font-size: 16px;
                font-weight: 600;
                color: #000;
            }
            span {
            display: inline-block;
            width: 6px;
            height: 20px;
            background-image:linear-gradient( 90deg, rgb(253,127,51) 0%, rgb(250,44,34) 99%);
            border-radius: 15px;
            }
        }
        
    }
    .list {
        width: 100%;
        margin: 0 auto;
        height: 100px;
        background-color: #fff;
        margin-top: 20px;
        ul{
            display: flex;
            justify-content: space-around;
            padding: 10px;
            width: 90%;
            height: 80px;
            margin: 0 auto;
            font-size: 12px;
            border-radius: 10px;
            background-color: #fff;
            box-shadow: 2px 2px 8px #dcdcdc;
            a{
                background: url("../../assets/hot.png") no-repeat;
                width: 15px;
                height: 20px;
                background-size: 100%;
            }
            li {
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                height: 70px;
                img {
                    width: 40px;
                    height: 30px;
                }
            }
            li:nth-child(2){
                width: 50px;
                p{
                    margin-top: 20px;
                }
            } 
            li:nth-child(3) {
                margin-left: 20px;
                p{
                    font-size: 12px;
                    color: #7a7a7a;
                }
                span{
                    margin-top: 20px;
                    font-size: 13px;
                    color: #ff6406;
                    font-weight: 600;
                }
                width: 120px;
            }
            li:nth-child(4) {
                width: 100px;
                p{
                    width: 100%;
                    margin-left: 50px;
                    color: #fa2c14;
                    font-weight: 600;
                }
                span{
                    width: 60px;
                    height: 30px;
                    text-align: center;
                    line-height: 30px;
                    border-radius: 4px;
                    background-image: linear-gradient( 90deg, rgb(253,127,51) 0%, rgb(250,44,34) 99%);
                    color: #fff;
                    margin-left: 40px;
                }
            }
        }
    }

</style>